<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>赛事名称：</span>
        <Input v-model="pageModel.eventsName" placeholder="请输入" clearable style="width: 150px" />
        <span>赛事年度：</span>
        <DatePicker v-model="pageModel.niandu" type="year" placeholder="请选择" clearable style="width: 150px"></DatePicker>
        <span>赛事状态：</span>
        <dict model="pageModel.competitionState" :value="pageModel.competitionState" @click="getVal" code="ZGX_SSZTSX"></dict>
        <span>赛事进度：</span>
        <dict model="pageModel.gameState" :value="pageModel.gameState" @click="getVal" code="ZGX_BSZT"></dict>
        <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>

    <Card class="m-t-sm">
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>

  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/game";
import { getDict } from "@/api/configure";
const api = new Api();
// 赛事管理
export default {
  props: ["kindCode"],
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      total: 0,
      pageModel: {
        niandu: null,
        eventsName: null,
        competitionState: null,
        gameState: null
      },
      kindNameUrl: this.$config.kindNameUrl(this.kindCode),
      page: {
        pageSize: this.$config.PAGE_SIZE,
        pageNo: 1,
        kindCode: this.kindCode
      },
      tableColumns: [
        {
          title: "序号",
          width: 80,
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },

        {
          title: "赛事名称",
          key: "eventsName",
          align: "left",
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.eventsName,
              params.row.eventsEnglishName
            );
            return h(
              "a",
              {
                on: {
                  click: () => {
                    let self = this;
                    self.$router.push({
                      path:
                        "/game-score-management/" +
                        self.kindNameUrl +
                        params.row.eventsId
                    });
                  }
                },
                domProps: { title }
              },
              title
            );
          }
        },
        {
          title: "赛事年度",
          key: "niandu",
          align: "left"
        },
        {
          title: "赛事级别",
          key: "gradeCode",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode: params.row.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "赛事计划",
          key: "planField",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#FF9933"
                }
              },
              (params.row.planField || 0) + "场"
            );
          }
        },
        {
          title: "赛事安排",
          key: "planArrange",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "green"
                }
              },
              (params.row.planArrange || 0) + "场"
            );
          }
        },
        {
          title: "已录入场次",
          key: "yiWriteCount",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "green"
                }
              },
              (params.row.yiWriteCount || 0) + "场"
            );
          }
        },
        {
          title: "待录入场次",
          key: "weiWriteCount",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#FF9933"
                }
              },
              (params.row.weiWriteCount || 0) + "场"
            );
          }
        },
        {
          title: "赛事状态",
          key: "competitionState",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_SSZTSX",
                value: params.row.competitionState,
                color: params.row.competitionState === "0" ? "green" : "red"
              }
            });
          }
        },
        {
          title: "赛事进度",
          key: "gameState",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_BSZT", value: params.row.gameState }
            });
          }
        },
        {
          title: "操作",
          key: "action",
          align: "left",
          width: 120,
          render: (h, params) => {
            let self = this;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      self.$router.push({
                        path: `/game-score-management/${self.kindNameUrl}${
                          params.row.eventsId
                        }`
                      });
                    }
                  }
                },
                "查看比赛安排"
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  mounted() {
    let self = this;
    if (this.kindCode == 20) {
      self.tableColumns = self.tableColumns.filter(
        x => x.key !== "gradeCode"
      );
    }
    self.fetchListStart();
  },
  methods: {
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      let self = this;
       if(this.$route.name === 'score-amateur') {
        self.page.type = 1
      } else if(this.$route.name === 'score-teen') {
        self.page.type = 0
      }
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      if (self.page.niandu) {
        self.page.niandu = self.$moment(self.page.niandu).format("YYYY");
      }
      self.fetchList();
    },
    fetchList() {
      this.loading = true;
      api
        .queryList(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      this.fetchListStart();
    }
  }
};
</script>

<style scoped>
</style>
